<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      v-model:query="query"
      title="文件资源"
      ref="tableRef"
      :queryFormHeaders="queryFormHeaders"
      :table="table"
      :tableColumns="tableColumns"
      :operatorColumnWidth="250"
      :baseUrl="urls.API_URL_BACKSTAGE_FILERESOURCE_MANAGE"
      dialogWidth="800"
      :formHeader="formHeader"
      v-model:form="form"
      @beforeAddRow="beforeAddRow"
    >
      <!-----------------------------表格自定义列----------------------------------------->
      <!--账户姓名-->
      <template #table_column_authorName="scope: any">
        {{ scope.row.author != null ? scope.row.author.nickName : '' }}
      </template>
      <!--账户姓名-->
      <template #table_column_lastAuthorName="scope: any">
        {{ scope.row.lastAuthor != null ? scope.row.lastAuthor.nickName : '' }}
      </template>

      <!-----------------------------表格自定义列（操作列）----------------------------------------->
      <template #table_operator_left="scope">
        <el-button @click="downloadFile(scope.row)" type="primary" size="small" icon="Bottom" plain>下载</el-button>
      </template>
      <!-----------------------------表单自定义元素----------------------------------------->
      <!-- <template #dialog_form_file>
        <el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" :limit="1" :on-change="handleChange">
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">不超过5M的文件</div>
          </template>
        </el-upload>
      </template> -->
      <!-----------------------------表单自定义元素----------------------------------------->
    </PerfectTableComponent>
  </div>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import PictureComponent from '@/components/base/other/PictureComponent.vue';
import useTableList from '@/api/hooks/useTableList';
import urls from '@/api/request/urls';
import { onMounted, provide, ref, onBeforeUnmount, shallowRef } from 'vue';
import type { FormHeader, ResponseData, TableColumn } from '@/types/interface/base_interface';
import { getDict, yesOrNoDict } from '@/api/dict';
import type { Daily, DailyType, FileResource } from '@/types/interface/sys_interface';
import Request from '@/api/request/request';
import { downloadFromUrl } from '@/api/utils/FileUtil';
import type { UploadProps } from 'element-plus';
// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_FILERESOURCE_MANAGE
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);
//表格==========================================================
// 表格插件ref对象
const tableRef = ref();
//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([]);

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([]);
//表单=====================================================
//表单对象
const form = ref<FileResource>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);
onMounted(async () => {
  //定义上传文件选项选项。
  const resourceTypeDict = await getDict('上传文件类型');
  queryFormHeaders.value = [
    // 查询表单
    {
      prop: 'title',
      label: '标题'
    },
    {
      label: '文件类型',
      prop: 'resourceType',
      type: 'select',
      list: resourceTypeDict
    },
    {
      prop: 'enabled',
      label: '是否可用',
      type: 'select',
      list: yesOrNoDict
    }
  ];
  //表格
  tableColumns.value = [
    {
      label: '资源标题',
      prop: 'title',
      fixed: true,
      width: 240
    },
    // {
    //   label: '原文件名',
    //   prop: 'originFileName',
    //   width: 100
    // },
    {
      label: '文件路径',
      prop: 'fileUrl',
      width: 300
    },
    {
      label: '资源类型',
      prop: 'resourceType',
      width: 80,
      type: 'dict',
      dict: resourceTypeDict
    },
    {
      label: '资源大小',
      prop: 'resourceSizePrint',
      width: 100
    },
    {
      label: '是否可用',
      prop: 'enabled',
      width: 80,
      type: 'dict',
      dict: yesOrNoDict
    },
    {
      label: '作者',
      prop: 'authorName',
      type: 'custom',
      width: 100
    },
    {
      label: '创建时间',
      prop: 'createTime',
      width: 180
    },
    {
      label: '最后编辑者',
      prop: 'lastAuthorName',
      type: 'custom',
      width: 100
    },
    {
      label: '最后编辑时间',
      prop: 'updateTime',
      width: 180
    }
  ];
  //表单组成
  formHeader.value = [
    {
      label: '文件类型',
      prop: 'resourceType',
      action: 'post',
      type: 'select',
      list: resourceTypeDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '文件',
      prop: 'file',
      action: 'post',
      placeholder: '请选择不超过5M的文件上传',
      type: 'uploadFile',
      width: '300px'
    },
    {
      prop: 'title',
      label: '资源标题',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 255,
          message: '长度在1到 255个字符',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '资源描述',
      prop: 'description',
      type: 'editor',
      config: {
        wangeditor: {
          editorPlaceholder: '请输入资源描述',
          toolbarMode: 'simple',
          editorMode: 'simple',
          toolbarExcludeKeys: [
            'uploadImage', // 假设这是上传图片的key
            'uploadVideo' // 假设这是上传视频的key
          ]
        }
      }
    },
    {
      label: '是否可用',
      prop: 'enabled',
      type: 'switch'
    }
  ];
});

//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    enabled: true
  };
};
//在添加行的动作以前
const afterLoadDataSuccessInEditRow = async () => {
  //注意，如果富文本初始传入的值是null，则会错误。因此为了避免后端传入null，这里要做处理
  if (form.value.description === null) {
    form.value.description === '1';
  }
};
const downloadFile = async (fileResource: FileResource) => {
  // 下载文件或弹出错误信息
  downloadFromUrl(`${urls.API_URL_BACKSTAGE_FILERESOURCE_DOWNLOAD}/${fileResource.id}`, {}, fileResource.title!);
};
//上传文件
const uploadRef = ref();
</script>

<style scoped></style>
